<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC__/admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/admin/style/admin.css" media="all">
    <style>
        .chat-icon{
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #eef0f6;
            text-align: center;
            margin: 10px 5px 10px 0;
            cursor: pointer;
        }
        .chat-icon img{
            width: 32px;
            margin-top: 2px;
        }
        .layui-form-radio > i:hover,
        .layui-form-radioed > i  {
            color: #1E9FFF;
        }
        .ck_icon {
            background: #1E9FFF;
        }
        body,html{height: 100%}
    </style>
</head>
<body>

<div class="layui-fluid" style="height: 100%">
    <div class="layui-row layui-col-space15" style="height: 100%">
        <div class="layui-col-md12" style="height: 100%">
            <div class="layui-card" style="height: 100%">

                <div class="layui-card-body" style="height: 100%">
                    <div class="layui-row layui-col-space15" style="height: 100%">
                        <div class="layui-col-md5">
                            <div class="layui-row layui-col-space15">
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend style="font-size: 18px">窗口样式</legend>
                                    <div class="layui-field-box">
                                        <div class="layui-form">
                                            <div class="layui-form-item">
                                                <div class="layui-input-block" style="margin-left: 40px">
                                                    <img src="__STATIC__/common/images/chat/ic_btn_under.png" alt="" style="width: 24px; height: 24px; margin: -4px 8px 0px 0px;">
                                                    <input type="radio" name="fix_type" value="1" lay-filter="style_type" title="底边按钮" {if $style['style_type'] eq 1}checked{/if}>
                                                </div>
                                                <div class="layui-input-block" style="margin-left: 40px">
                                                    <img src="__STATIC__/common/images/chat/ic_btn_side.png" alt="" style="width: 24px; height: 24px; margin: -4px 8px 0px 0px;">
                                                    <input type="radio" name="fix_type" value="2" lay-filter="style_type" title="侧边按钮" {if $style['style_type'] eq 2}checked{/if}>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset class="layui-elem-field layui-field-title" style="margin-top: -30px">
                                    <legend style="font-size: 18px">主题颜色</legend>
                                    <div class="layui-field-box">
                                        <div id="color" style="margin-left: 75px"></div>
                                    </div>
                                </fieldset>
                                <fieldset class="layui-elem-field layui-field-title" style="margin-top: -20px">
                                    <legend style="font-size: 18px">图标样式</legend>
                                    <div class="layui-field-box" style="padding: 10px 30px 10px 30px">
                                        {for start="1" end="13"}
                                        <span class="chat-icon {if $style['box_icon'] eq $i}ck_icon{/if}" data-id="{$i}">
                                            <img src="__STATIC__/common/images/chat/chat-{$i}.png" alt="">
                                        </span>
                                        {if $i == 6}
                                        <br/>
                                        {/if}
                                        {/for}
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">提示内容</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="title" required  lay-verify="required" placeholder="咨询客服" autocomplete="off" class="layui-input" value="{$style['box_title']}">
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset class="layui-elem-field layui-field-title" style="margin-top: -20px">
                                    <legend style="font-size: 18px">按钮位置</legend>
                                    <div class="layui-field-box">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label" id="desc">侧边距(像素)</label>
                                            <div class="layui-input-block">
                                                <input type="number" id="margin" required  lay-verify="required" placeholder="60" autocomplete="off" class="layui-input" min="0" value="{$style['box_margin']}">
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                <div class="layui-form-item" style="margin-top: -30px;">
                                    <div class="layui-input-block">
                                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo" id="save">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md7" style="height: 100%">
                            <div class="layui-row layui-col-space15" style="height: 100%">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">预览网址</label>
                                        <div class="layui-input-block" style="width: 400px">
                                            <input type="text" id="preview-url" placeholder="http://" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button class="layui-btn layui-btn-normal" id="preview">
                                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="height:90%;width: 100%;background: #f8f9fb">
                                    <iframe style="width: 100%;height:100%;border: none" src="" id="pre-see"></iframe>
                                    <div style="{$baseCss1}" id="style-1">
                                        <img src="/static/common/images/chat/chat-{$style['box_icon']}.png" style="height: 32px;width: 32px;margin-left: -9px;" id="style-1-img">
                                        <span id="my-1-title">{$style['box_title']}</span>
                                    </div>
                                    <div style="{$baseCss2}display: none;" id="style-2">
                                        <img src="/static/common/images/chat/chat-{$style['box_icon']}.png" style="height: 32px;width: 32px;margin-left: -9px;" id="style-2-img">
                                        <span id="my-2-title">{$style['box_title']}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="__STATIC__/admin/layui/layui.js"></script>
<script src="__STATIC__/common/js/jquery.min.js"></script>
<script>
    var myColor = '{$style["box_color"]}';
    var styleId = {$style["style_type"]};
    var icon = '{$style["box_icon"]}';
    layui.config({
        base: '__STATIC__/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'element', 'colorpicker'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;

        form.on('radio(style_type)', function(data){
            styleId = data.value;
            if (1 == styleId) {
                $("#desc").text('侧边距(像素)');
            } else if (2 == styleId) {
                $("#desc").text('底边距(像素)');
            }

            $("#style-" + styleId).show().siblings().hide();
            $('#style-' + styleId).css('background', myColor);
        });

        var colorpicker = layui.colorpicker;

        colorpicker.render({
            elem: '#color',
            color: '{$style["box_color"]}'
            ,done: function(color) {
                var styleId = $('input[name="fix_type"]:checked').val();
                $('#style-' + styleId).css('background', color);
                myColor = color;
            }
        });

        form.on('submit(component-form-element)', function(data){

            $.post("{:url('system/index')}", data.field, function (res) {

                if(0 == res.code) {

                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.reload();
                    }, 200);
                } else {

                    layer.alert(res.msg, {
                        'title': '添加错误',
                        'icon': 2
                    });
                }
            }, 'json');
            return false;
        });
    });
    
    $(function () {

        $("#style-" + styleId).show().siblings().hide();

        $(".chat-icon").click(function () {
            console.log(styleId);
            icon = $(this).attr('data-id');
            $(this).addClass('ck_icon').siblings().removeClass('ck_icon');
            $('#style-' + styleId + '-img').attr('src', '/static/common/images/chat/chat-' + $(this).attr('data-id') + '.png');
        });

        $('#title').keyup(function () {
            $('#my-' + styleId + '-title').text($(this).val());
        });

        $('#margin').keyup(function () {
            if (1 == styleId) {
                $('#style-1').css('right', $(this).val() + 'px');
            } else if (2 == styleId) {
                $('#style-2').css('bottom', $(this).val() + 'px');
            }
        });
        
        $("#save").click(function () {
            layui.use('layer', function () {

                var layer = layui.layer;

                var index = layer.load(0, {shade: false});
                $.post('{:url("system/myStyle")}', {
                    style_type: $('input[name="fix_type"]:checked').val(),
                    box_color: myColor,
                    box_icon: icon,
                    box_title: $("#title").val(),
                    box_margin: $('#margin').val()
                }, function (res) {

                    layer.close(index);
                    layer.msg(res.msg);

                }, 'json');
            });
        });
        
        $("#preview").click(function () {

            var url = $("#preview-url").val();
            if (url != '') {
                $("#pre-see").attr('src', url);
            }
        });
    });
</script>
</body>
</html>